<template>
  <section class="food_detail" v-if="isShow">
    <div class="mask" @click="removeFooddetail"></div>
    <div class="container">
      <div class="content" v-if="detail">
        <div class="name">{{ detail.name }}</div>
        <img :src="imageUrl + detail.food_img" alt="" />
        <span class="sales">月销：{{ detail.sales }}</span>
        <p class="describe">{{ detail.description }}</p>
      </div>
      <footer class="select_spces" v-if="detail">
        <span class="price">￥{{ detail.specs[0].price }}</span>
        <button v-if="detail.is_specs == 1" @click="showSpecs(detail)">
          选规格
        </button>
        <add-cart v-else :foods="detail" />
      </footer>
    </div>
  </section>
</template>

<script>
import AddCart from './AddCart';

import { imageUrl } from '@/config/env';

export default {
  props: {
    detail: {
      type: Object,
      default: function() {
        return {};
      }
    },
    isShow: Boolean
  },
  data() {
    return {
      imageUrl
    };
  },
  components: {
    AddCart
  },
  methods: {
    removeFooddetail() {
      this.$emit('removeFoodDetail');
    },
    showSpecs(data) {
      this.$emit('showSpecsView', data, 'food');
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: 106;
  border-radius: 6px;
  background-color: #fff;
  .content {
    padding: 10px;
    font-size: var(--font-min);
    .name {
      font-size: var(--font-size);
    }
    img {
      width: 100%;
      border-radius: 6px;
      margin: 8px 0;
    }
    .describe {
      margin-top: 5px;
    }
  }
  .select_spces {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-radius: 0 0 6px 6px;
    background-color: #eee;
    .price {
      color: red;
    }
    button {
      padding: 2px 5px;
      border-radius: 10px;
      font-size: var(--font-min);
      background-color: var(--color-base);
    }
  }
}
</style>
